<template>
  <div class="account-manage">
    <comRNav title="账户管理" />
    <van-cell-group style="background-color:#eee">
      <van-cell title="用户名" value="13994999385" />
      <van-cell title="性别" :is-link="sex == '设置性别'" :value="sex" @click="sexShow = true" />
      <van-cell title="生日" is-link @click="showPopFn()" :value="timeValue" />
      <van-cell title="地区" is-link :value="provinceCity" @click="showAddressFn()"
        style="border-bottom: 1px solid #fff;" />
      <div class="addressArea" v-if="showSelectAddress">
        <select v-model="province" @change="handleChange" class="province">
          <option value="省份">省份</option>
          <option v-for="(item,index) in addressItem" :key="item.value" :label="item.label"
            :value="item.label + '-' + item.value + '-' + index"></option>
        </select>
        <select v-model="city" class="province" @change="handleCity">
          <option value="城市">城市</option>
          <option v-for="item in cityItem" :key="item.value" :label="item.label" :value="item.label + '-' + item.value">
          </option>
        </select>
      </div>
      <van-cell title="收货地址管理" is-link style="margin:10px 0" />
      <van-cell title="修改密码" is-link @click="handleJump" />
    </van-cell-group>
    <!-- 性别 -->
    <van-action-sheet v-model="sexShow" :actions="actions" cancel-text="取消" close-on-click-action @cancel="onCancel"
      @select="onSelect" />
    <!-- 生日 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()"
        @cancel="cancelFn()" />
    </van-popup>

    <MineFooter />
  </div>
</template>

<script>
import comRNav from "../components/comRNav";
import MineFooter from "../components/MineFooter";
import addressData from "../assets/json/address.json";
import { userUpdate } from "../utils/login.js";
import { Toast } from "vant";
export default {
  name: "account-manage",
  data() {
    return {
      provinceCity: localStorage.getItem("addr") || "省份，城市", //省份城市
      showSelectAddress: false, //显示/隐藏选择地址
      province: "", //省值
      city: "", //市值
      addressItem: [], //省级数据
      cityItem: [], // 市级数据
      sex: localStorage.getItem("sex") || "设置性别", //性别
      sexShow: false,
      actions: [{ name: "男" }, { name: "女" }],
      msg: "",
      currentDate: new Date(),
      changeDate: new Date(),
      show: false, // 用来显示弹出层
      timeValue: localStorage.getItem("birth")
    };
  },
  computed: {},
  created() {
    this.addressItem = addressData;
    if (this.provinceCity == "null") {
      this.provinceCity = "省份，城市";
    }
    if (this.sex == "null") {
      this.sex = "设置性别";
    }
    if (this.timeValue == "null") {
      this.timeValue = "";
    }
  },
  methods: {
    //跳转修改密码
    handleJump() {
      this.$router.push("/ChangePasswor");
    },
    // 显示地址选择
    showAddressFn() {
      this.showSelectAddress = true;
    },
    //省值改变
    handleChange() {
      console.log(this.province);
      let addressArr = this.province.split("-");
      this.cityItem = this.addressItem[parseInt(addressArr[2])].children;
    },
    //市值改变
    handleCity() {
      // 天津-7481-1 天津市-7482
      console.log(this.province, this.city);
      let addressProv = this.province.split("-");
      console.log(addressProv);
      let addressCity = this.city.split("-");
      console.log(addressCity);

      userUpdate({
        uid: localStorage.getItem("uid"),
        addr: addressProv[0] + "，" + addressCity[0]
      }).then(res => {
        Toast("修改成功");
        this.provinceCity = addressProv[0] + "，" + addressCity[0];
        localStorage.setItem("addr", this.provinceCity);
        this.showSelectAddress = false;
      });
    },
    //显示生日选择
    showPopFn() {
      this.show = true;
    },
    //生日值变化是触发
    changeFn() {
      this.changeDate = this.currentDate; // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
    },
    //生日确定按钮
    confirmFn() {
      userUpdate({
        uid: localStorage.getItem("uid"),
        birth: this.timeFormat(this.currentDate)
      }).then(res => {
        Toast("修改成功");
        this.timeValue = this.timeFormat(this.currentDate);
        localStorage.setItem("birth", this.timeValue);
        this.show = false;
      });
    },
    //生日取消按钮
    cancelFn() {
      this.show = true;
    },
    // 时间格式化 2019-09-08
    timeFormat(time) {
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + "年" + month + "月" + day + "日";
    },
    //性别取消按钮
    onCancel() {
      Toast("取消");
    },
    //性别确认按钮
    onSelect(item) {
      userUpdate({
        uid: localStorage.getItem("uid"),
        sex: item.name
      }).then(res => {
        this.sexShow = false;
        Toast(item.name);
        this.sex = item.name;
        localStorage.setItem("sex", this.sex);
      });
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
    }
  },
  components: {
    comRNav,
    MineFooter
  }
};
</script>

<style lang="scss" scoped>
.account-manage {
  .van-cell {
    border-bottom: 1px solid #eee;
  }
  .van-cell::after {
    border-bottom: none;
  }
  .addressArea {
    background-color: #fff;
    overflow: hidden;
    padding: 0 16px;
    .province {
      width: 47%;
      height: 32px;
      line-height: 32px;
      margin: 10px 3% 20px 0;
      float: left;
      background-color: rgb(221, 221, 221);
      border: 1px solid #ddd;
      overflow: hidden;
      box-sizing: border-box;
    }
  }
}
</style>